<template>
  <v-layout class="header" pb-1 pt-3 justify-between align-center wrap>
    <v-flex class="top" md12 d-flex justify-between align-center>
      <v-flex md3 title class="cursor" @click="$router.push({ name: 'Missions'})">
          <img class="logo-image" src="@/assets/images/logo.jpg" alt="">
      </v-flex>
      <v-flex md5 d-flex justify-between>
        <v-flex md3>
          <v-select :items="categories" v-model="queryForm.category" label="Category"></v-select>
        </v-flex>
        <v-flex md6 px-2>
          <v-text-field name="search-deals" solo label="Search deals" v-model="titleEnglish"></v-text-field>
        </v-flex>
        <v-flex md3>
          <v-btn color="primary" round dark @click="onSeach">
            <v-icon>search</v-icon>
          </v-btn>
        </v-flex>
      </v-flex>
      <v-flex md3 v-if="!isLogined">
        <span class="title cursor grey--text" @click="$router.push({name: 'Login'})">Login</span>
        <span> | </span>
        <span class="title cursor grey--text" @click="$router.push({name: 'Register'})">Sign Up</span>
      </v-flex>
      <v-flex md3 v-else>
        <v-menu offset-y>
          <v-btn color="primary" flat large slot="activator">
            <span>{{ userInfo.username }}</span>
          </v-btn>
          <v-list>
            <v-list-tile @click="$router.push({name: 'MyWallet'})">
              <v-list-tile-title>My Wallet</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push({name: 'MyMissions'})">
              <v-list-tile-title>My Missions</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push({name: 'ReferFriend'})">
              <v-list-tile-title>Refer A Friend</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push({name: 'Settings'})">
              <v-list-tile-title>Settings</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push({name: 'Qna'})">
              <v-list-tile-title>Q&amp;A</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="onLogout">
              <v-list-tile-title>Logout</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-btn flat icon color="primary">
          <v-icon>notifications</v-icon>
        </v-btn>
      </v-flex>
    </v-flex>

    <v-flex class="bottom" md12 d-flex justify-between align-center py-2>
      <v-flex md3 class="title cursor hover-menu">
        <v-menu offset-y open-on-hover>
          <div slot="activator">
            <v-icon>menu</v-icon>Categoies
          </div>
          <v-list dense class="category-list">
            <v-list-tile
              class="list-item"
              v-for="(item, i) in categories"
              :key="i"
              @click="onCategoryClicked(item)"
            >
              <v-list-tile-title v-text="item.text"></v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
      </v-flex>
      <v-flex md3 class="title cursor" @click="$router.push({name: 'Deals'})">Deals</v-flex>
      <v-flex md3 class="title cursor" @click="$router.push({name: 'ReferFriend'})">Share</v-flex>
      <v-flex md3 class="title cursor" @click="$router.push({name: 'MainQna'})">Q&amp;A</v-flex>
    </v-flex>

    <!-- <v-layout row justify-center>
      <v-dialog v-model="dialog" max-width="420">
        <v-card>
          <v-card-title class="headline">{{ dialogTitle }}</v-card-title>
          <v-card-text>
            <com-login @hide="dialog = false" v-if="dialogType === 1" />
            <com-register v-else />
          </v-card-text>
        </v-card>
      </v-dialog>
    </v-layout> -->
  </v-layout>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';
import { Login } from "@/api";
import { KV } from '@/utils/type';
import { State, Action, Mutation, Getter, namespace } from "vuex-class";
const userModule = namespace('userModule');
const varsModule = namespace('varsModule');

declare const $Vue: Vue;

@Component
export default class Header extends Vue {

  @userModule.State('isLogined') isLogined: any;
  @userModule.State('userInfo') userInfo: any;
  @userModule.Action('saveLoginStateFN') saveLoginStateFN: any;
  @userModule.Action('saveUserInfoFN') saveUserInfoFN: any;
  @userModule.Action('logoutFN') logoutFN: any;
  @varsModule.Action('saveCategoryFN') saveCategoryFN: any;

  private categories: Array<KV> = [
    { text: "Recommended", value: -1 },
    { text: "Prime Video", value: 1 },
    { text: "Music, CDs & Vinyl", value: 2 },
    { text: "Digital Music", value: 3 },
    { text: "Kindle Store", value: 4 },
    { text: "Arts & Crafts", value: 5 },
    { text: "Automotive", value: 6 },
    { text: "Baby", value: 7 },
    { text: "Beauty & Personal Care", value: 8 },
    { text: "Books", value: 9 },
    { text: "Computers", value: 10 },
    { text: "Electronics", value: 11 },
    { text: "Women's Fashion", value: 12 },
    { text: "Men's Fashion", value: 13 },
    { text: "Girls' Fashion", value: 14 },
    { text: "Boys' Fashion", value: 15 },
    { text: "Health & Household", value: 16 },
    { text: "Home & Kitchen", value: 17 },
    { text: "Industrial & Scientific", value: 18 },
    { text: "Luggage", value: 19 },
    { text: "Movies & Television", value: 20 },
    { text: "Pet Supplies", value: 21 },
    { text: "Software", value: 22 },
    { text: "Sports & Outdoors", value: 23 },
    { text: "Tools & Home Improvement", value: 24 },
    { text: "Toys & Games", value: 25 },
    { text: "Video Games", value: 26 }
  ];

  private queryForm: any = {};

  private titleEnglish: string = '';

  private category: number = 1;

  private showCategory: boolean = false;


  private username: string = '';
  private password: string = '';
  private account: string = '';

  private dialog: boolean = false;
  private dialogTitle: string = 'Login';
  private dialogType: number = 1;

  protected mounted() {
    // this.testData();

  }

  private testData() {
    this.username = '1234'
    this.password = '123456'
  }

  private onLoginClicked() {
    this.dialog = true;
    this.dialogType = 1;
    this.dialogTitle = 'Login';
  }

  private onSignUpClicked() {
    this.dialog = true;
    this.dialogType = 2;
    this.dialogTitle = 'Sign Up';
  }

  private onLogout() {
    this.logoutFN();
    window.location.reload();
  }


  private onSeach() {
    let p: any = {
      category: this.category,
      titleEnglish: this.titleEnglish
    }
    if (this.$route.name !== 'Missions') {
      this.$router.push({
        name: 'Missions',
        params: p,
        query: {
          type: 'search'
        }
      });
    }
    $Vue.$emit('SearchMission', {
      category: this.category,
      titleEnglish: this.titleEnglish
    });
  }

  private onCategoryClicked(item: any) {
    this.saveCategoryFN(item);
    if (this.$route.name === 'Missions') {
      $Vue.$emit('Missions');
    } else {
      this.$router.push({
        name: 'Missions',
      });
    }
  }

  private async onLogin() {
    if (this.username === "") {
      return $Vue.$emit("snackbar", {
        message: "Please enter your account."
      });
    }
    if (this.password === "") {
      return $Vue.$emit("snackbar", {
        message: "Please enter your password."
      });
    }
    const params = {
      username: this.username,
      password: this.password,
      userType: 1,
    };

    const { data } = await Login.handleLogin.r(params);
    // 存储sessionId
    if (data.result === 0) {
      console.log('login', data);
      Cookie.set('p_userId', data.data.userVo.userId.toString());
      let userInfo = data.data;
      Cookie.set('p_token', userInfo.userVo.token);
      this.$emit('login', {
        newPath: 'Home/My',
        data,
      });
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }

  }
}
</script>


<style lang="less">
.header {
  width: 100%;
  height: 8rem;
  .top {
    height: 4rem;
    width: 100%;
  }

  .bottom {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
}

.logo-image {
  height: 3.6rem;
}
</style>

